<template>
  <div class="store-main">
    <div class="header-store">
      <div class="header">
        <span @click="goBack"><van-icon name="arrow-left" /></span>
        <span><img src="../../assets/image/icon-right.png" alt=""></span>
      </div>
      <div class="shop-nav">
        <div class="left">
          <img src="../../assets/image/81uqiMuZBKL._AC_UL1500_.jpg" alt="">
          <p>LINGKE 店铺</p>
        </div>
        <div class="right">
          <van-icon name="star" />
          收藏
        </div>
      </div>
    </div>
    <div class="store-nav">
      <van-tabs color="#002FFF" v-model="active">
        <van-tab title="推荐">
          <div class="goods-list">
            <div class="product-item" >
              <div  @click="category('goods')" v-for="(items,index1) in goods" :key="index1" class="item">
                <img :src="items.image" alt="">
                <p class="item-price">$ {{items.price}}</p>
                <p class="item-sale">卖出 {{ items.sale }}</p>
                <p class="item-content"> {{ items.content }} </p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="商品">
          <div class="give-other-list">
            <div class="product-nav margin-top">
              <img @click="showProduct=true" class="search" src="@/assets/image/menu.png" alt="">
              <div class="nav">
                <div class="input">
                  <img src="@/assets/image/search-o.png" alt="">
                  <input type="text" placeholder="搜索店铺内商品">
                </div>
              </div>
            </div>
            <div class="product-nav product-top">
              <div class="item-nav center">综合</div>
              <div class="item-nav center">销量
                <img src="@/assets/image/sort.jpeg" alt="">
              </div>
              <div class="item-nav center">价格
                <img src="@/assets/image/sort.jpeg" alt="">
              </div>
              <div class="item-nav center">新品
                <img src="@/assets/image/sort.jpeg" alt="">
              </div>
            </div>
            <div class="product-nav-goods">
              <div v-for="(items,index1) in goods" :key="index1" class="item">
                <div v-if="active===2" class="item-tip">
                  <p>1%</p>
                  <p>OFF</p>
                </div>
                <img :src="items.image" alt="">
                <p class="item-price">$ {{ items.price }}</p>
                <p class="item-sale">月销量 {{ items.sale }}</p>
                <p class="item-content"> {{ items.content }} </p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      active:0,
      goods:[
        {id:1,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.11,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:2,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.12,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:3,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.13,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:4,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.14,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:5,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.15,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:6,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.16,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:7,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.17,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
        {id:8,image:'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',price:35.18,sale:200,content:'KwikSafety 北卡罗来纳州夏洛特 THU... '},
      ],
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}

</script>

<style scoped lang="scss">
.store-main{
  width: 100%;
  .header-store{
    width: 100%;
    height: 200px;
    background: url('../../assets/image/bg.c4aa35c5.png') center center / 100% 100% no-repeat;

    .header{
      width: 100%;
      height: 40px;
      display: flex;
      padding: 3%;
      box-sizing: border-box;
      justify-content: space-between;
      span{
        color: #fff;
        img{
          height: 16px;
        }
      }
    }
    .shop-nav{
      width: 100%;
      height: 80px;
      position: relative;
      margin-top: 20px;
      .left{
        width: 100%;
        height: 80px;
        font-size: 18px;
        color: #fff;
        display: flex;
        padding: 3%;
        box-sizing: border-box;
        img{
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
        P{
          margin-left: 10px;
        }
      }
      .right{
        position: absolute;
        right: 0;
        width: 70px;
        height: 25px;
        background: #002FFF;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        top: 30px;
      }
    }
  }
  .store-nav{
    width: 100%;
    .goods-list{
      width: 100%;
      padding: 3%;
      box-sizing: border-box;
      .product-item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item{
          margin-bottom: 10px;
          width: 160px;
          min-height: 220px;
          padding: 6px;
          border: 1px solid #f6f6f6;
          img{
            width: 160px;
            height: 160px;
          }
          .item-price{
            margin-top: 10px;
            width: 100%;
            color: #002FFF;
            font-size: 16px;
            font-weight: 500;
          }
          .item-sale{
            width: 100%;
            color: #999;
            font-size: 10px;
            margin: 5px 0;
          }
          .item-content{
            width: 100%;
            color: #000;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

    }
    .give-other-list{
      width: 100%;
      padding: 3%;
      box-sizing: border-box;
      .product-nav {
        width: 100%;

        padding: 0 3%;
        box-sizing: border-box;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search{
          height: 30px;
        }

        .nav {
          width: 80%;
          height: 30px;
          display: flex;

          //background: #002FFF;
          .item {
            height: 40px;
            width: 50%;
            font-size: 14px;
            text-align: center;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            box-sizing: border-box;

            p {
              width: 100%;
              height: 30px;
              line-height: 40px;
              text-align: center;
              color: #999;
            }

            .active {
              color: #000;
            }

            span {
              width: 70%;
              height: 2.5px;
              border-radius: 3px;
              display: flex;
              background: #002FFF;
            }
          }

          .input{
            width: 100%;
            height: 28px;
            background: #f6f6f6;
            font-size: 12px;
            display: flex;
            align-items: center;
            border-radius: 14px;
            img{
              height: 30px;
            }
          }
        }

      }
      .product-top {
        width: 100%;
        justify-content: space-between;

        .item-nav {
          width: 20%;
          font-size: 14px;
          text-align: left;
        }

        .center {
          width: 50px;
          display: flex;
          align-items: center;

          img {
            margin-left: 5px;
            height: 16px;
          }
        }
      }
      .product-nav-goods {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 80px;

        .item {
          position: relative;
          margin-bottom: 10px;
          width: 160px;
          min-height: 220px;
          padding: 6px;
          border: 1px solid #f6f6f6;

          .item-tip {
            position: absolute;
            right: 0;
            top: 0;
            height: 35px;
            background-position: top center;
            background: url("../../assets/image/sell.png") 50% 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            width: 35px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 5px 0;
            box-sizing: border-box;

            p {
              color: #fff;
              width: 100%;
              text-align: center;
              font-size: 8px;
            }
          }

          img {
            width: 160px;
            height: 160px;
          }

          .item-price {
            margin-top: 10px;
            width: 100%;
            color: #002FFF;
            font-size: 16px;
            font-weight: 500;
          }

          .item-sale {
            width: 100%;
            color: #999;
            font-size: 10px;
            margin: 5px 0;
          }

          .item-content {
            width: 100%;
            color: #000;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
